<template>
  <el-dialog
    v-model="visible"
    :title="
      type == 'add'
        ? '添加(掘金自动签到)'
        : type == 'set'
        ? '步骤(掘金自动签到)'
        : '修改(掘金自动签到)'
    "
    width="50%"
  >
    <div v-if="type == 'set'">
      <div class="main">
        1.获取相关认证信息 <br />
        我们需要登录自己的掘金账户
        <a href="https://juejin.cn/" target="_Blank">https://juejin.cn/</a>
        ，通过浏览器抓取请求来获得自己的认证信息，方便后续的配置。<br />
        首先我们使用Chrome浏览器登录自己的掘金账号，打开掘金首页。然后鼠标右键选择检查，则可以打开浏览器控制台，我们切换到Network这个Tab来抓取请求，此时我们刷新页面，即可看到所有的请求。<br />
        获取cookie：<br />
        我们随便打开一个请求，查看请求Headers，即可在里面看到cookie字段，拷贝备用，如下图
        <img
          src="https://pic3.zhimg.com/80/v2-ae9b5e6f20e4e36a8977c11a683d3e82_1440w.jpg"
          alt=""
        />
        2.获取uuid、aid和_signature：<br />
        我们在浏览器打开这个地址：
        <a
          href="https://juejin.cn/user/center/signin?from=avatar_menu"
          target="_Blank"
          >https://juejin.cn/user/center/signin?from=avatar_menu</a
        ><br />
        然后我们在上面的搜索框搜索check，即可看到一个请求和相应的3个值，拷贝备用，如下图：
        <img
          src="https://pic1.zhimg.com/80/v2-cd64cf27d54c9a0eb9027b82de204d64_1440w.jpg"
          alt=""
        />
      </div>
    </div>
    <el-form
      v-else
      :model="ruleForm"
      :rules="rules"
      ref="formRef"
      label-width="180px"
      class="demo-form-inline"
    >
      <el-form-item label="姓名(真实姓名)" prop="name">
        <el-input v-model="ruleForm.name" type="text"></el-input>
      </el-form-item>
      <el-form-item label="cookie" prop="cookie">
        <el-input
          v-model="ruleForm.cookie"
          type="textarea"
          :rows="12"
        ></el-input>
      </el-form-item>
      <el-form-item label="PUSH_PLUS_TOKEN" prop="PUSH_PLUS_TOKEN">
        <el-input
          v-model="ruleForm.PUSH_PLUS_TOKEN"
          type="text"
          placeholder="该字段可不填写"
        ></el-input>
      </el-form-item>
      <el-form-item label="aid" prop="aid">
        <el-input v-model="ruleForm.aid" type="text"></el-input>
      </el-form-item>
      <el-form-item label="uuid" prop="uuid">
        <el-input v-model="ruleForm.uuid" type="text"></el-input>
      </el-form-item>
      <el-form-item label="_signature" prop="_signature">
        <el-input
          v-model="ruleForm._signature"
          type="textarea"
          :rows="4"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" v-if="type != 'set'"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import axios from "@/utils/axios";
import { ElMessage } from "element-plus";
export default {
  props: {
    type: String,
    reload: Function,
  },
  setup(props) {
    const formRef = ref(null);
    const state = reactive({
      visible: false,
      ruleForm: {
        name: "",
        cookie: "",
        PUSH_PLUS_TOKEN: "",
        aid: "",
        uuid: "",
        _signature: "",
      },
      rules: {
        name: [
          { required: "true", message: "name不能为空", trigger: ["change"] },
        ],
        cookie: [
          { required: "true", message: "cookie不能为空", trigger: ["change"] },
        ],
        aid: [
          { required: "true", message: "aid不能为空", trigger: ["change"] },
        ],
        uuid: [
          {
            required: "true",
            message: "uuid不能为空",
            trigger: ["change"],
          },
        ],
        _signature: [
          {
            required: "true",
            message: "_signature不能为空",
            trigger: ["change"],
          },
        ],
      },
    });
    //打开弹窗
    const open = (row) => {
      state.visible = true;
      console.log(props);
      if (row) {
        state.ruleForm = JSON.parse(JSON.stringify(row));

        if (props.reload) props.reload();
      }
    };
    //提交
    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          if (props.type == "add") {
            let httpOption = axios.post;
            let params = { ...state.ruleForm };
            httpOption("/api/admin/juejins", params).then((res) => {
              if (res.status === 1) {
                ElMessage.success(res.reason);
                state.visible = false;
                if (props.reload) props.reload();
              } else ElMessage.error(res.reason);
            });
          } else if (props.type == "edit") {
            let httpOption = axios.patch;
            let params = { ...state.ruleForm };
            httpOption(`/api/admin/juejins/${state.ruleForm.id}`, params).then(
              (res) => {
                if (res.status === 1) {
                  ElMessage.success(res.reason);
                  state.visible = false;
                  if (props.reload) props.reload();
                } else ElMessage.error(res.reason);
              }
            );
          }
        }
      });
    };
    return {
      open,
      submitForm,
      formRef,
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
.main {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
}
.main > img {
  width: 100%;
  height: 400px;
  margin: 20px 0;
}
</style>